<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <title>AiDex Sharp 快速开发平台-登录页面</title>
    <link rel="stylesheet" type="text/css" href="/static/regist/css/style.css">
    <link rel="icon" href="/static/regist/img/favicon.ico">
    <link href="https://fonts.googleapis.com/css?family=Poppins:600&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/a81368914c.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<img class="wave" src="/static/regist/img/wave.png">
<div class="container">
    <div class="img">
        <img src="/static/regist/img/bg.svg">
    </div>
    <div class="login-content">
        <form id="registerForm" action="index.html">
            <img style="border: 1px solid #d5d5d5;border-radius: 8px;" src="/static/regist/img/logo.svg">
            <h2 class="title" style="font-size: 36px;">若依-AiDex Sharp</h2>
            <div class="input-div one">
                <div class="i">
                    <i class="fas fa-user"></i>
                </div>
                <div class="div">
                    <h5 id="name_msg">用户名</h5>
                    <input id="name" autofocus name="name" type="text" class="input">
                </div>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="div">
                    <h5>密码</h5>
                    <input id="pass" name="pass" type="password" class="input">
                </div>
            </div>
            <div class="input-div pass">
                <div class="i">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="div">
                    <h5>确认密码</h5>
                    <input id="repass" type="password" class="input">
                </div>
            </div>
            <div id="password_msg" style="color: red; margin-top: 10px;"></div>
            <input type="submit" class="btn" value="注册">
        </form>
    </div>
</div>
<script type="text/javascript" src="/static/regist/js/main.js"></script>
<script src="/static/layui/layui.js"></script>
<script>
    layui.use(function(){
        var $ = layui.$;

        $("#name").blur(function (){
            // 回调函数
            $.ajax({
                url: "/user/checkUserNameUnique",
                type: "post",
                data: {name: $("#name").val()},
                dataType: "text",
                success: function (data) {
                    if (data == "true") {
                        $("#name_msg").html("");
                        $("input[type=submit]").attr("disabled", false).css("background-color", "dodgerblue");
                    } else {
                        $("#name_msg").html("用户名已存在").css("color", "red");
                        $("input[type=submit]").attr("disabled", true).css("background-color", "#ccc");
                    }
                }
            });
        });

        $("#repass").blur(function () {
            var pass = $("#pass").val();
            var repass = $("#repass").val();
            if (pass !== repass) {
                $("#password_msg").html("密码不一致").css("color", "red");
                $("input[type=submit]").attr("disabled", true).css("background-color", "#ccc");
            } else {
                $("#password_msg").html("");
                $("input[type=submit]").attr("disabled", false).css("background-color", "dodgerblue");
            }
        });

        $("#registerForm").submit(function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            var name = $("#name").val();
            var pass = $("#pass").val();
            var repass = $("#repass").val();

            // 检查用户名是否已存在
            $.ajax({
                url: "/user/checkUserNameUnique",
                type: "post",
                data: {name: name},
                dataType: "text",
                async: false, // 同步请求，确保在继续之前完成
                success: function (data) {
                    if (data == "true") {
                        $("#name_msg").html("");
                    } else {
                        $("#name_msg").html("用户名已存在").css("color", "red");
                        return false;
                    }
                }
            });

            // 检查密码是否一致
            if (pass !== repass) {
                $("#password_msg").html("密码不一致").css("color", "red");
                return false;
            }

            // 如果所有验证都通过，手动提交表单
            this.submit();
        });
    });
</script>
</body>
</html>